<template>
  <el-container style="height: 100vh">
    <!--头部-->
    <el-header>
      <el-page-header @back="goBack" content="管理账号页面"></el-page-header>
    </el-header>
    <!-- 侧边-->
    <el-container>
      <el-aside width="420px">
        <!--侧边头部-->
        <div class="asidehead">
          <img class="avatar" src="@/assets/head.jpg" alt="Avatar" />
          <span class="asideheadtitle">总管理员</span>
        </div>
        <!--侧边中间-->
        <div class="asidemiddle">
          <!--卡片-->
  <el-card class="box-card">
    <div class="text item">
      <h5>市场部请求</h5>
    </div>
    <div class="text item">
      <h5>营销部请求</h5>
    </div>
    <div class="text item">
      <h5>其他请求</h5>
    </div>
  </el-card>

  <el-divider>
    <!--分割线-->
  </el-divider>
        </div>
        <div class="asidefoot">
        <span class="foottitle">最近操作</span>
        </div>
      </el-aside>
      <!--主体-->
      <el-main>
        <!--主体头部-->
  <div class="mainhead">

        <span class="mainheadtitle">组织表雇员信息查询</span>
     
    <div class="custom-tree-container">
      <div class="block">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        ></el-input>
        </div>
        </div>
  </div>
<!--主体中间-->
  <div class="mainmain">
    <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :render-content="renderTreeContent"
          :filter-node-method="filterNode"
          ref="tree"
        ></el-tree>
    </div>
  <!-- 弹窗输入新节点名称 -->
  <el-dialog title="新增节点" :visible.sync="dialogVisible">
      <el-input v-model="newNodeName" placeholder="请输入新节点名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddNode">确定</el-button>
      </span>
    </el-dialog>
</el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    renderTreeContent(h, { node, data }) {
      return h('span', [
        data.isEditing
          ? h('el-input', {
              props: { value: data.label, size: 'mini', clearable: true },
              style: { width: 'auto', fontSize: '14px', padding: '0' },
              attrs: { autofocus: true },
              on: {
                input: (val) => { data.label = val; },
                blur: () => { this.toggleEdit(data, true); },
                keyup: (event) => {
                  if (event.key === 'Enter') this.toggleEdit(data, true);
                  else if (event.key === 'Escape') this.toggleEdit(data, false);
                }
              }
            })
          : h('span', [
              h('span', data.label, { style: { fontSize: '14px' } }),
              h('el-button', {
                props: { icon: 'el-icon-edit', size: 'mini', type: 'text' },
                on: { click: () => { this.toggleEdit(data, true); } }
              }),
              h('el-button', {
                props: { icon: 'el-icon-plus', size: 'mini', type: 'text' },
                on: { click: () => { this.showAddNodeDialog(data); } }
              }),
              h('el-button', {
                props: { icon: 'el-icon-delete', size: 'mini', type: 'text' },
                on: { click: () => { this.deleteNode(data); } }
              })
            ])
      ]);
    },
    toggleEdit(node, save) {
      if (!save) {
        node.label = node.originalLabel || node.label;
      } else {
        node.originalLabel = node.label;
      }
      this.$set(node, 'isEditing', !node.isEditing);
      this.saveData();
    },
    showAddNodeDialog(node) {
      this.currentNode = node;
      this.newNodeName = '';
      this.dialogVisible = true;
    },
    confirmAddNode() {
      if (this.newNodeName.trim()) {
        const newNode = {
          id: Date.now(),
          label: this.newNodeName,
          isEditing: false,
          children: []
        };
        if (!this.currentNode.children) {
          this.$set(this.currentNode, 'children', []);
        }
        this.currentNode.children.push(newNode);
      }
      this.dialogVisible = false;
      this.saveData();
    },
    deleteNode(node) {
      const deleteRecursively = (data, node) => {
        for (let i = 0; i < data.length; i++) {
          if (data[i] === node) {
            data.splice(i, 1);
            return true;
          } else if (data[i].children) {
            if (deleteRecursively(data[i].children, node)) return true;
          }
        }
        return false;
      };
      deleteRecursively(this.data, node);
      this.saveData();
    },
    saveData() {
      // 将树的数据保存到 localStorage
      localStorage.setItem('treeData', JSON.stringify(this.data));
    },
    loadData() {
      // 从 localStorage 加载数据
      const savedData = localStorage.getItem('treeData');
      if (savedData) {
        this.data = JSON.parse(savedData);
      } else {
        // 如果没有保存的数据，加载默认数据
        this.data = [
          {
            id: 1,
            label: '一级 1',
            children: [
              {
                id: 4,
                label: '二级 1-1',
                children: [
                  { id: 9, label: '三级 1-1-1' },
                  { id: 10, label: '三级 1-1-2' }
                ]
              }
            ]
          },
          {
            id: 2,
            label: '一级 2',
            children: [
              { id: 5, label: '二级 2-1' },
              { id: 6, label: '二级 2-2' }
            ]
          },
          {
            id: 3,
            label: '一级 3',
            children: [
              { id: 7, label: '二级 3-1' },
              { id: 8, label: '二级 3-2' }
            ]
          }
        ];
      }
    }
  },
  data() {
    return {
      filterText: '',
      dialogVisible: false,
      newNodeName: '',
      currentNode: null,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  created() {
    // 页面加载时从 localStorage 加载数据
    this.loadData();
  }
};

</script>

<style>
/*侧边 */
.el-aside {
  color: rgb(231, 232, 234);
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
}
/*主体 */
.el-main {
  color: rgb(34, 174, 141);
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
}
/*树节点*/
.custom-tree-node {
  display: inline-flex;
  align-items: center;
}
/*侧边头部 */
.asidehead {
  display: flex;
  align-items: center; /* 垂直居中 */
  height:95px;/* 设置容器的高度 */
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
}
/*侧边中间 */
.asidemiddle{
  height:435px;

}
/*侧边底部 */
.asidefoot{
  height:240px;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
}
/*卡片内容 */
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
.box-card {
  width: 420px;
}
/*侧边底部标题 */
.foottitle {
  position:relative;
  top: 20px; /* 距离容器顶部10px */
  left: 60px; /* 距离容器左边10px */
  font-size: 16px;
  font-weight: bold;
  color:aquamarine;
}
/*主题头部 */
.mainhead{
  height:80px;
color:aquamarine;
padding: 20px;
}
/*主题头部标题 */
.mainheadtitle{
  position:relative;
  top: 10px; /* 距离容器顶部10px */
  left: 80px; /* 距离容器左边10px */
  font-size: 16px;
  font-weight: bold;
}
/*侧边头部头像 */
.avatar{
  width: 50px; /* 设置头像的宽度 */
  height: 50px; /* 设置头像的高度 */
  border-radius: 50%; /* 设置为圆形 */
  object-fit: cover; /* 保证头像不变形 */
  border: 2px solid #ddd; /* 给头像添加一个边框，您可以自定义颜色和宽度 */
  left:40px;
  position:relative;
}
/*侧边头部标题 */
.asideheadtitle{
  position:relative;
  left:85px;
  color:aquamarine;
}
.block{
  position:relative;
  width: 580px;
  height: 45px;
  left: 50%;
  top:-20px;
  transform: translateX(-50%);
}
.header{
  height:180px;
}
</style>
